<template>
	<view class="wrap-navigation-bar" :style="'padding-top: ' + navigationHeight + 'px;'">
		<image class="top-header-bg" mode="widthFix" :src="$staticImagePath('common/top_bg.png')" />

		<view class="navigation-bar">
			<view class="navigation-back flex align-center just-center" @click.stop="onNavigationLeft">
				<image class="img" :src="$staticImagePath('common/navigation_black.png')" />
			</view>

			<view class="navigation-title flex align-center just-center f-36">{{ navigationTitle }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 标题
			 */
			navigationTitle: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight - 45,
			};
		},
		methods: {
			/**
			 * 返回
			 */
			onNavigationLeft() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-navigation-bar {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		height: 45px;
		z-index: 99;
		overflow: hidden;
		box-sizing: content-box;

		.top-header-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			background: transparent;
			z-index: 100;
		}

		.navigation-bar {
			width: 100%;
			height: 45px;
			overflow: hidden;
			position: relative;
			z-index: 101;

			.navigation-back {
				position: absolute;
				left: 0;
				top: 0;
				width: 45px;
				height: 45px;
				z-index: 102;

				.img {
					width: 35rpx;
					height: 35rpx;
				}
			}

			.navigation-title {
				position: absolute;
				left: 50px;
				top: 0;
				width: calc(100% - 100px);
				height: 45px;
				z-index: 102;
				overflow: hidden;
			}
		}
	}
</style>
